Step 2 - Use a JavaScript script to control the application state

In the first section of this step you create another state manager to set which indicators are visible when the user switches the application on and off. In the second section of the step you add a JavaScript script to define when the application is switched on and off.

Create a state manager to switch the air conditioning application on and off

In this section you create a state manager that controls which indicators are visible when the application is switched on and off. You use images that show the air conditioning level indicators gray when the air conditioning is switched off and the first level indicator bar green when the air conditioning is switched on.

To create a state manager to switch the application on and off:

  1. In the Library > State Managers create a state manager, and name it OnOff Switch.
  2. In the OnOff Switch rename the state group to AC OnOff, and the two states On and Off.
  3. In the Library > State Managers > OnOff Switch select the AC OnOff state group and in the Properties set the Initial State to OnOff Switch/AC OnOff/Off.
  4. In the On and Off states create a State Object for the image that the application displays when it is switched on and off.
    For example, name the state objects Image.
  5. Select the Image state objects and in the Properties add and set:

    The Levels on image contains the level indicator bars with the first bar visible, and the Levels off image displays the level indicator bars gray when the application is switched off. You set the state manager to display the correct image when the application is in the On and Off state.

  6. In the On state create a State Object for each level, name them Level 1, Level 2, Level 3, and Level 4, and in the Properties:
  7. In the Library select the Level 1, Level 2, Level 3, and Level 4 state objects, copy and paste them to the Off state, and in the Properties disable the Hit Testable property.
  8. In the Project select the AirCondition level node, in the Properties add the State Manager property, and set it to OnOff Switch.
    You set the OnOff Switch state manager for the AirCondition level node to control the level buttons.

In the Preview clicking the indicator buttons switches them on. In the next section you add a JavaScript script to set the application to the Off state when all the indicator buttons are switched off.
In the Interact mode you can interact with your application in the Preview window as you would on a device. When you are using a Preview tool, to switch to the Interact mode, in the Preview window click .

Use a JavaScript script to control the state managers

In this section you add a JavaScript script to the application to control the application state. You set the application to execute the script when the values of the Legs, Body, and Shield toggle buttons change.

  1. In the Project select the RootPage node, in the Node Components in the Triggers section right-click, and select Add Trigger > General > On Property Change.
    Kanzi executes the On Property Change trigger when the set property value changes.
  2. In the On Property Change trigger click the Add dropdown menu and select the Execute Script action.
    When the On Property Change trigger is set off, Kanzi executes the script you select in the Script Editor.
  3. In the Execute Script window select + Create Script to create a script.
  4. In the Script Editor write the script you want to use to control which indicators are visible when the application is switched on and off. See Scripting reference.
    For example, use this script:
    // Get the toggle state of the Body, Legs, and Shield toggle buttons.

var shield = node.lookupNode('./Shield');
var shieldState = shield.getProperty('ButtonConcept.ToggleState');

var legs = node.lookupNode('./Legs');
var legsState = legs.getProperty('ButtonConcept.ToggleState');

var body = node.lookupNode('./Body');
var bodyState = body.getProperty('ButtonConcept.ToggleState');

var stack = node.lookupNode('./AirCondition level');

var levelButtons = node.lookupNode('./AirCondition level/Level buttons');

// Set the AC OnOff state to On when the Body, Legs, or Shield toggle button
// state is 1. If no button state is 1, set the state to Off and the level button
// state to Level 1.

if (shieldState != 0 || legsState != 0 || bodyState != 0)
{
    stack.goToState('AC OnOff.On');
}
else
{
    stack.goToState('AC OnOff.Off');
    levelButtons.goToState('Level.1')    
}
  5. In the Project select the RootPage node, in the Node Components in the On Property Change trigger click Trigger Settings, and in the Trigger Settings Editor set:

  6. Add two more triggers for On Property Change, from the first On Property Change trigger copy and paste the Execute Script action to each new trigger, and in the Trigger Settings Editor for those triggers set:

    You create a trigger for each of the Body, Legs, and Shield buttons. When a user clicks one of those buttons Kanzi executes the script, and the application checks the state of each indicator button. Clicking one of the buttons triggers the application to go to the On state. When all buttons are switched off, the application switches off also the level indicators.

In the Preview when you click any of the areas for which you want to switch on the air conditioning, the application is switched on. Once the application is switched on, you can change the level and switch on and off other areas. To switch the air conditioning off, switch off the Body, Shield, and Legs indicator buttons.


< PREVIOUS STEP

What's next?

In this tutorial you learned how to control your Kanzi application with state managers. You also learned how to use a JavaScript script to control a state manager. Now you can:

See also

State manager

Using scripts

Using state managers

Using state transitions

Open topic with navigation